<template>
	<view class="container">
		<uni-nav-bar title="诊断贴详情" backgroundColor="#0480FB" color="#FFFFFF" statusBar="true" @clickLeft="back()"
			left-icon="arrowleft">
		</uni-nav-bar>
		<u-notify ref="uNotify" message="Hi uView"></u-notify>
		<view class="body">
			<scroll-view class="select-facility-view" @scrolltolower="handleScrolltolowerone()" scroll-y="true"
				:style="{height:setcollapseheight() - 180 + 'px'}">
				<view class="main">
					<view class="content">
						<view class="oneline">
							<view class="serialnumber"></view>
							<view class="title">
								{{diagnosticItemList.invitationTitle}}
							</view>
						</view>
						<view class="contents">
							<view class="img">
								<image src="@/static/index-message/V.png"></image>
							</view>
							<view class="name">
								{{diagnosticItemList.invitationContent}}
							</view>
						</view>
						<view class="twoline">
							<view class="img3">
								<image src="@/static/index-message/jingliren.png"></image>
							</view>
							<view class="name">
								发帖人：{{userName}}
							</view>
						</view>
						<view class="twoline">
							<view class="img4">
								<image src="@/static/index-message/unit.png"></image>
							</view>
							<view class="name">
								发帖日期：{{diagnosticItemList.createTime}}
							</view>
						</view>
						<view class="twoline">
							<view class="img4">
								<image src="@/static/index-message/liulanliang.png"></image>
							</view>
							<view class="name">
								浏览量：{{diagnosticItemList.pageView}}
							</view>
						</view>
						<view class="firstimg" v-for="item in firstImgList" :key="item.invitationImgId"
							v-if="item.invitationImgUrl">
							<image :src="item.invitationImgUrl" @click="clickImg(item.invitationImgUrl)">
							</image>
						</view>
						<view class="video" v-for="it in firstVideoList" :key="it.invitationVedioId">
							<MyVideo :videoUrl="it.invitationVedioUrl"></MyVideo>
						</view>
					</view>
					<view class="replay" v-if="communicationList.length>0">
						回复
					</view>
					<view class="publish" v-for="(item,index) in communicationList" :key="index">
						<view class="publishuser">
							<view class="left">
								<view class="icon">
									<image src="../../../../../../static/push/18x18.png" mode=""></image>
								</view>
								<view class="name">
									{{item.user.nickName}}
								</view>
							</view>
							<view class="right">
								{{item.createTime}}
							</view>
						</view>
						<view class="publishcontent">
							<view class="method">
								{{item.exchangeContent}}
							</view>
						</view>
						<view class="publishImg" v-if="item.picUrls" v-for="it in item.picUrlList">
							<image :src="it" mode="" style="margin: 10rpx 0;" @click="clickImg(it)"></image>
						</view>
						<view class="videoImg" style="margin-top: 20rpx;" v-if="item.vedioUrls"
							v-for="it in item.vedioUrlList">
							<MyVideo :videoUrl="it" class="video"></MyVideo>
						</view>
					</view>
				</view>
				<view class="a">
					<view class="ideas">
						诊断意见
					</view>
					<view class="opinions" v-if="!resolveFlag">
						<u--textarea :confirmType="null" v-model="option" placeholder="请输入诊断意见" />
					</view>
					<view class="btns" v-if="!resolveFlag">
						<view class="item" @click="publishOpinion">
							<u-button type="primary" size="mini" text="发布诊断意见" shape="circle"
								color="#0480FB"></u-button>
						</view>
					</view>
				</view>
			</scroll-view>
			<u-popup :show="showImg" mode="center" width="100%" height="100%" @close="showImg=false">
				<view class="showImg">
					<image :src="showImgUrl" mode="widthFix"></image>
				</view>
			</u-popup>
		</view>
		
		<bottomTabar></bottomTabar>
	</view>

</template>

<script>
	import navBar from '../../../components/nav-bar/index.vue'
	import Api from '@/api/socialized-servce/specialist-consultation/expert-module/diagnostic-list/invitation-details/index.js'
	import userApi from '@/api/socialized-servce/specialist-consultation/user-module/my-interrogation/interrogation-detail/index.js'
	import bottomTabar from '../../../components/bottom-tabar/index.vue'
	import MyVideo from "@/subPage1/components/myVideo/myVideo.vue"
	export default {
		name: 'invitation-details',
		components: {
			bottomTabar,
			navBar,
			MyVideo
		},
		data() {
			return {
				invitationId: '',
				diagnosticItemList: {},
				userName: '',
				firstImgList: [],
				firstVideoList: [],
				communicationList: [],
				shoppingMes: {
					nowpage: 1,
					total: 0,
				},
				option: '',
				showImg: false,
				showImgUrl: '',
				choicenessFlag: false,
				resolveFlag: false
			}
		},
		onLoad(option) {
			this.invitationId = option.id
		},
		onShow() {
			this.getDiagnosticList()
			this.getCommunicationList()
		},
		methods: {
			async getDiagnosticList() {
				let params = {}
				let res = await userApi.queryPostList(params, this.invitationId)
				if (res.code == 200) {
					this.diagnosticItemList = res.data
					this.resolveFlag = res.data.resolveFlag
					this.userName = this.diagnosticItemList.publisher.nickName || ''
					this.firstImgList = res.data.imgList
					this.firstVideoList = res.data.vedioList
				}
			},
			async getCommunicationList() {
				let params = {
					invitationId: this.invitationId
				}
				let res = await userApi.queryCommunicationList(params)
				if (res.code === 200) {
					this.communicationList = res.data
					console.log(this.communicationList, 'ww');
				}
			},
			clickImg(e) {
				this.showImg = !this.showImg
				this.showImgUrl = e
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			handleScrolltolowerone() {
				let len = this.shoppingMes.nowpage * 10
				if (len >= this.shoppingMes.total) return
				const params = {
					page: this.shoppingMes.nowpage,
					size: 10
				}
				this.getShopList(this.shoppingMes.nowpage, params)
			},
			setcollapseheight() {
				let winHeight = 0
				let topheightone = uni.upx2px(136)
				uni.getSystemInfo({
					success: function(res) {
						winHeight = res.windowHeight
					}
				})
				let oldHeight = uni.upx2px(136)
				winHeight = parseInt(winHeight) - topheightone - oldHeight
				// #ifndef H5
				winHeight = winHeight - 10
				// #endif
				return winHeight
			},
			async publishOpinion() {
				if (this.option == '') {
					this.$refs.uNotify.show({
						top: 10,
						type: 'success',
						color: '#000',
						bgColor: '#f56c6c',
						message: '输入不能为空',
						duration: 1000 * 3,
						fontSize: 20,
						safeAreaInsetTop: true
					})
					return;
				}
				let res = await Api.submitExpertOpinion(this.diagnosticItemList.invitationId, this.option)
				if (res.code == 200) {
					this.option = ''
					uni.showToast({
						title: '诊断成功！'
					})
					setTimeout(() => {
						uni.redirectTo({
							url: '/subPage1/socialized-service/specialist-consultation/expert-module/my-diagnosis/my-diagnosis'
						})
					}, 500)
				} else if (res.code == 500) {
					this.$refs.uNotify.show({
						top: 10,
						type: 'success',
						color: '#000',
						bgColor: '#f56c6c',
						message: '您目前未排班',
						duration: 1000 * 3,
						fontSize: 20,
						safeAreaInsetTop: true
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #F5F6FA;
		width: 100%;
		height: 100%;

		.body {
			position: relative;
			margin-top: 26rpx;
			width: 100%;

			.select-facility-view {
				.main {
					width: 100%;
					overflow: hidden;

					.content {
						padding: 36rpx;
						margin: 0 40rpx;
						background: #FFFFFF;
						box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.05);
						border-radius: 10rpx 10rpx 10rpx 10rpx;
						overflow: hidden;

						.oneline {
							position: relative;

							.serialnumber {
								position: absolute;
								top: 8rpx;
								left: 0;
								width: 10rpx;
								height: 28rpx;
								background-color: #91743E;
							}

							.title {
								padding-left: 24rpx;
								font-size: 32rpx;
								font-weight: 500;
								color: #91743E;
							}
						}

						.contents {
							margin-top: 30rpx;
							display: flex;
							padding: 0 30rpx;

							.img {
								width: 35rpx;
								height: 30rpx;
								margin-right: 26rpx;

								image {
									width: 35rpx;
									height: 30rpx;
								}
							}
						}

						.twoline {
							display: flex;
							padding: 0 30rpx;
							align-items: center;
							margin-top: 18rpx;
							font-size: 26rpx;
							color: #808080;

							.img {
								width: 35rpx;
								height: 30rpx;

								image {
									position: relative;
									z-index: 999;
									width: 35rpx;
									height: 30rpx;
								}
							}

							.img3 {
								width: 30rpx;
								height: 30rpx;

								image {
									position: relative;
									z-index: 999;
									width: 27rpx;
									height: 35rpx;
								}
							}

							.img4 {
								width: 35rpx;
								height: 26rpx;

								image {
									position: relative;
									z-index: 999;
									width: 35rpx;
									height: 26rpx;
								}
							}
						}

						.firstimg {
							margin: 0 30rpx;
							margin-top: 20rpx;
							height: 408rpx;

							image {
								width: 100%;
								height: 408rpx;
							}
						}

						.video {
							padding: 0 48rpx;
							margin-top: 10rpx;
							height: 400rpx;

							::v-deep iframe {
								width: 100% !important;
								height: 320rpx !important;
							}
						}

					}

					.replay {
						width: 100%;
						margin: 20rpx 0;
						font-size: 24rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #757575;
					}

					.publish {
						padding: 30rpx 0;
						background: #FFFFFF;
						box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.05);

						.publishuser {
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding: 0 36rpx;
							font-size: 28rpx;
							font-family: Arial-Regular, Arial;
							font-weight: 400;
							color: #606060;

							.left {
								display: flex;
								align-items: center;

								.icon {
									width: 27rpx;
									height: 27rpx;
									margin-right: 10rpx;

									image {
										width: 100%;
										height: 100%;
									}
								}

								.name {}
							}
						}

						.publishcontent {
							margin-top: 24rpx;
							padding: 0 80rpx;
							font-size: 26rpx;
							font-family: Source Han Sans CN-Regular, Source Han Sans CN;
							font-weight: 400;
							color: #606060;
						}

						.publishImg {
							margin-top: 20rpx;
							width: 100%;
							height: 408rpx;

							image {
								width: 100%;
								height: 408rpx;
							}
						}

						.videoImg {
							margin-top: 20rpx;
							width: 100%;
							height: 408rpx;

							::v-deep iframe {
								width: 100% !important;
								height: 408rpx !important;
							}
						}

					}
				}

				.idea {
					margin: 30rpx 40rpx;
					font-size: 24rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #757575;
				}

				.a {
					position: fixed;
					bottom: 0;
					width: 100%;
					background-color: #F5F6FA;
					height: 500rpx;
					z-index: 97;

					.ideas {
						position: fixed;
						bottom: 420rpx;
						margin: 30rpx 40rpx;
						font-size: 28rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #757575;
					}


					.opinions {
						width: 100%;

						::v-deep .u-textarea {
							position: fixed;
							left: 50%;
							bottom: 240rpx;
							transform: translateX(-50%);
							width: calc(100% - 80rpx);
							height: 160rpx;

						}
					}

					.btns {
						position: fixed;
						bottom: 170rpx;
						left: 50%;
						width: 340rpx;
						height: 54rpx;
						transform: translateX(-50%);
						.item {
							height: 100%;
							::v-deep {
								.u-button {
									height: 100%;
								}
							}
						}
					}
				}
			}
		}
	}

	::v-deep .u-swiper__wrapper {
		height: 100% !important;
	}

	::v-deep .u-swiper__wrapper__item__wrapper__image {
		height: 100% !important;
	}

	::v-deep .uni-stat__select {
		width: 298rpx;
		height: 62rpx;
	}

	::v-deep .uni-select__input-placeholder {
		color: #0480FB;
	}

	::v-deep .uni-textarea-textarea {
		font-size: 26rpx;
		font-weight: 400;
		color: #808080;
	}
</style>